<template>
  <div class="calendar-container">
    <!-- 预约用户信息 -->
    <div class="user-info-section">
      <h3 class="section-title">预约用户信息</h3>
      <div class="user-card">
        <div class="user-avatar">
          <img :src="userInfo.avatar || '/default-avatar.png'" alt="用户头像" />
        </div>
        <div class="user-details">
          <h4 class="user-name">{{ userInfo.name }}</h4>
          <p class="user-student-id">学号：{{ userInfo.studentId }}</p>
          <p class="user-grade">年级：{{ userInfo.grade }}</p>
          <p class="user-school">{{ userInfo.school }}</p>
          <p class="user-major">专业：{{ userInfo.major }}</p>
        </div>
      </div>
    </div>

    <!-- 选择咨询师和预约时间 -->
    <div class="appointment-section">
      <h3 class="section-title">选择咨询师和预约时间</h3>
      
      <!-- 心理老师列表 -->
      <div class="teachers-list">
        <div 
          v-for="teacher in teachersList" 
          :key="teacher.id"
          class="teacher-card"
          :class="{ 'active': selectedTeacher && selectedTeacher.id === teacher.id }"
          @click="selectTeacher(teacher)"
        >
          <div class="teacher-info">
            <div class="teacher-avatar">
              <img :src="teacher.avatar || '/default-avatar.png'" alt="老师头像" />
            </div>
            <div class="teacher-details">
              <h4 class="teacher-name">{{ teacher.name }}</h4>
              <p class="teacher-title">{{ teacher.title }}</p>
              <div class="teacher-rating" v-if="teacher.rating">
                <span class="rating-stars">
                  <i v-for="n in 5" :key="n" 
                     class="el-icon-star-on" 
                     :class="{ 'star-filled': n <= Math.floor(teacher.rating), 'star-half': n === Math.ceil(teacher.rating) && teacher.rating % 1 !== 0 }">
                  </i>
                </span>
                <span class="rating-score">{{ teacher.rating }}</span>
                <span class="consultation-count">（{{ teacher.consultationCount }}次咨询）</span>
              </div>
              <div class="teacher-specialties" v-if="teacher.specialties">
                <span class="specialty-tag" v-for="specialty in teacher.specialties" :key="specialty">
                  {{ specialty }}
                </span>
              </div>
              <p class="teacher-description">{{ teacher.description }}</p>
            </div>
          </div>
          
          <!-- 可预约时间段 -->
          <div v-if="selectedTeacher && selectedTeacher.id === teacher.id" class="available-times">
            <div class="time-slots">
              <div 
                v-for="date in getAvailableDates(teacher)"
                :key="date.date"
                class="date-slot"
                :class="{ 'selected': selectedDate === date.date }"
                @click.stop="selectDate(date.date)"
              >
                <div class="date-info">
                  <span class="date-number">{{ formatDate(date.date, 'DD') }}</span>
                  <span class="date-day">{{ formatDate(date.date, 'ddd') }}</span>
                </div>
              </div>
            </div>
            
            <!-- 时间段选择 -->
            <div v-if="selectedDate" class="time-periods">
              <div 
                v-for="period in getTimePeriodsForDate(teacher, selectedDate)"
                :key="period.id"
                class="time-period"
                :class="{ 
                  'available': period.available,
                  'selected': selectedTimePeriod && selectedTimePeriod.id === period.id 
                }"
                @click.stop="selectTimePeriod(period)"
              >
                {{ period.startTime }} - {{ period.endTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择咨询方式 -->
    <div class="consultation-methods">
      <h3 class="section-title">选择咨询方式</h3>
      <div class="methods-grid">
        <div 
          v-for="method in consultationMethods"
          :key="method.id"
          class="method-card"
          :class="{ 'selected': selectedMethod && selectedMethod.id === method.id }"
          @click="selectMethod(method)"
        >
          <div class="method-icon">
            <i :class="method.icon"></i>
          </div>
          <h4 class="method-title">{{ method.title }}</h4>
          <!-- <div class="method-price" v-if="method.price">
            <span class="price-amount">¥{{ method.price }}</span>
            <span class="price-duration">/ {{ method.duration }}</span>
          </div> -->
          <p class="method-description">{{ method.description }}</p>
          <div class="method-advantages" v-if="method.advantages">
            <span class="advantage-tag" v-for="advantage in method.advantages" :key="advantage">
              {{ advantage }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 咨询问题描述 -->
    <div class="problem-description">
      <h3 class="section-title">咨询问题描述</h3>
      <el-input
        v-model="problemDescription"
        type="textarea"
        :rows="4"
        placeholder="请简单描述您需要咨询的问题"
        maxlength="500"
        show-word-limit
      ></el-input>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button size="large" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="large" @click="handleSubmit" :disabled="!canSubmit">
        确定预约
      </el-button>
    </div>
  </div>
</template>

<script>
import { getTeachersList, getTeacherSchedule, getConsultationMethods, createAppointment } from '@/api/system/appointment'
import { mapGetters } from 'vuex'

export default {
  name: 'CalendarAppointment',
  data() {
    return {
      loading: false,
      submitting: false,
      
      // 用户信息
      userInfo: {
        name: '陈西西',
        studentId: '20210211',
        school: '计算机科学技术学院',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face',
        grade: '2021级',
        major: '计算机科学与技术',
        phone: '138****5678',
        email: 'chenxixi@example.com'
      },
      
      // 心理老师列表
      teachersList: [],
      
      // 咨询方式
      consultationMethods: [],
      
      // 选中的数据
      selectedTeacher: null,
      selectedDate: null,
      selectedTimePeriod: null,
      selectedMethod: null,
      problemDescription: ''
    }
  },
  
  computed: {
    ...mapGetters(['userInfo']),
    canSubmit() {
      return this.selectedTeacher && 
             this.selectedDate && 
             this.selectedTimePeriod && 
             this.selectedMethod &&
             this.problemDescription.trim() &&
             !this.submitting
    },
    
    // 当前日期
    currentDate() {
      return new Date().toISOString().split('T')[0]
    }
  },
  
  async mounted() {
    console.log('心理老师预约系统初始化中...')
    console.log('当前用户信息:', this.userInfo)
    await this.loadInitialData()
    console.log('系统初始化完成！')
  },
  
  methods: {
    // 加载初始数据
    async loadInitialData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadTeachers(),
          this.loadConsultationMethods()
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败，请刷新重试')
      } finally {
        this.loading = false
      }
    },
    
    // 加载心理老师数据
    async loadTeachers() {
      try {
        // 暂时注释真实API调用，直接使用模拟数据
        // const response = await getTeachersList()
        
        // 使用丰富的模拟数据
        this.teachersList = [
          {
            id: 1,
            name: '张心怡教授',
            title: '主任医师、心理学博士',
            description: '擅长认知行为治疗、情绪管理、人际关系问题。从业15年，具有丰富的临床经验。',
            avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=100&h=100&fit=crop&crop=face',
            specialties: ['焦虑症', '抑郁症', '人际关系'],
            rating: 4.9,
            consultationCount: 1200,
            availableSchedule: this.generateMockSchedule()
          },
          {
            id: 2,
            name: '李明华老师',
            title: '副主任医师、心理咨询师',
            description: '专业心理咨询师，精神卫生医师，擅长青少年心理问题、学习压力疏导。',
            avatar: 'https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=100&h=100&fit=crop&crop=face',
            specialties: ['学习压力', '青少年心理', '适应问题'],
            rating: 4.8,
            consultationCount: 800,
            availableSchedule: this.generateMockSchedule()
          },
          {
            id: 3,
            name: '王雅琴老师',
            title: '心理咨询师、家庭治疗师',
            description: '专业家庭治疗师，擅长家庭关系、情感问题、创伤后应激障碍治疗。',
            avatar: 'https://images.unsplash.com/photo-1594824723558-0b7b32e94f15?w=100&h=100&fit=crop&crop=face',
            specialties: ['家庭关系', '情感问题', '创伤治疗'],
            rating: 4.7,
            consultationCount: 650,
            availableSchedule: this.generateMockSchedule()
          },
          {
            id: 4,
            name: '陈建国老师',
            title: '心理咨询师、职业规划师',
            description: '资深心理咨询师，专注职业发展、生涯规划、压力管理等领域。',
            avatar: 'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=100&h=100&fit=crop&crop=face',
            specialties: ['职业规划', '压力管理', '自我成长'],
            rating: 4.6,
            consultationCount: 500,
            availableSchedule: this.generateMockSchedule()
          }
        ]
        
        console.log('加载了', this.teachersList.length, '位心理老师的模拟数据')
      } catch (error) {
        console.error('获取老师列表失败:', error)
        this.$message.error('加载老师列表失败，请重试')
      }
    },
    
    // 加载咨询方式
    async loadConsultationMethods() {
      try {
        // 暂时注释真实API调用，直接使用模拟数据
        // const response = await getConsultationMethods()
        
        // 使用丰富的模拟咨询方式数据
        this.consultationMethods = [
          {
            id: 1,
            title: '电话咨询',
            description: '通过电话一对一咨询，方便快捷，随时随地都可进行',
            icon: 'el-icon-phone',
            price: 150,
            duration: '50分钟',
            advantages: ['方便快捷', '保护隐私', '费用较低']
          },
          {
            id: 2,
            title: '视频咨询',
            description: '通过视频面对面咨询，沟通更直观，效果更佳',
            icon: 'el-icon-video-camera',
            price: 200,
            duration: '50分钟',
            advantages: ['面对面交流', '效果更好', '灵活便捷']
          },
          {
            id: 3,
            title: '面对面咨询',
            description: '在专业咨询室进行面对面咨询，体验最佳',
            icon: 'el-icon-user-solid',
            price: 300,
            duration: '50分钟',
            advantages: ['专业环境', '效果最佳', '完整体验']
          }
        ]
        
        console.log('加载了', this.consultationMethods.length, '种咨询方式')
      } catch (error) {
        console.error('获取咨询方式失败:', error)
        this.$message.error('加载咨询方式失败，请重试')
      }
    },
    
    // 生成模拟日程数据
    generateMockSchedule() {
      const schedule = {}
      const today = new Date()
      
      // 生成未来14天的时间段
      for (let i = 0; i < 14; i++) {
        const date = new Date(today)
        date.setDate(today.getDate() + i)
        const dateStr = date.toISOString().split('T')[0]
        const dayOfWeek = date.getDay()
        
        // 周末和工作日的时间段不同
        const timeSlots = []
        
        if (dayOfWeek === 0 || dayOfWeek === 6) {
          // 周末时间段
          timeSlots.push(
            { id: `${dateStr}_1`, startTime: '09:00', endTime: '10:00', available: Math.random() > 0.4 },
            { id: `${dateStr}_2`, startTime: '10:30', endTime: '11:30', available: Math.random() > 0.4 },
            { id: `${dateStr}_3`, startTime: '14:00', endTime: '15:00', available: Math.random() > 0.3 },
            { id: `${dateStr}_4`, startTime: '15:30', endTime: '16:30', available: Math.random() > 0.3 },
            { id: `${dateStr}_5`, startTime: '19:00', endTime: '20:00', available: Math.random() > 0.5 }
          )
        } else {
          // 工作日时间段
          timeSlots.push(
            { id: `${dateStr}_1`, startTime: '09:00', endTime: '10:00', available: Math.random() > 0.3 },
            { id: `${dateStr}_2`, startTime: '10:30', endTime: '11:30', available: Math.random() > 0.3 },
            { id: `${dateStr}_3`, startTime: '14:00', endTime: '15:00', available: Math.random() > 0.2 },
            { id: `${dateStr}_4`, startTime: '15:30', endTime: '16:30', available: Math.random() > 0.2 },
            { id: `${dateStr}_5`, startTime: '17:00', endTime: '18:00', available: Math.random() > 0.4 },
            { id: `${dateStr}_6`, startTime: '19:00', endTime: '20:00', available: Math.random() > 0.4 },
            { id: `${dateStr}_7`, startTime: '20:30', endTime: '21:30', available: Math.random() > 0.6 }
          )
        }
        
        // 过去的日期不可预约
        if (i === 0) {
          timeSlots.forEach(slot => {
            const slotTime = new Date(`${dateStr} ${slot.startTime}`)
            const now = new Date()
            if (slotTime <= now) {
              slot.available = false
            }
          })
        }
        
        schedule[dateStr] = timeSlots
      }
      
      return schedule
    },
    
    // 选择心理老师
    async selectTeacher(teacher) {
      if (this.selectedTeacher && this.selectedTeacher.id === teacher.id) {
        return // 已经选中的老师，不需要重新选择
      }
      
      this.selectedTeacher = teacher
      this.selectedDate = null
      this.selectedTimePeriod = null
      
      // 模拟加载老师的时间表
      try {
        // 暂时注释真实API调用，使用模拟数据
        // const response = await getTeacherSchedule(teacher.id)
        // if (response.data) {
        //   this.selectedTeacher.availableSchedule = response.data
        // }
        
        // 为选中的老师生成新的时间表
        this.selectedTeacher.availableSchedule = this.generateMockSchedule()
        console.log('已为老师生成模拟时间表:', this.selectedTeacher.name)
      } catch (error) {
        console.error('获取老师时间表失败:', error)
        // 使用现有数据
      }
    },
    
    // 选择日期
    selectDate(date) {
      this.selectedDate = date
      this.selectedTimePeriod = null
    },
    
    // 选择时间段
    selectTimePeriod(period) {
      if (period.available) {
        this.selectedTimePeriod = period
      } else {
        this.$message.warning('该时间段不可预约')
      }
    },
    
    // 选择咨询方式
    selectMethod(method) {
      this.selectedMethod = method
    },
    
    // 获取老师的可预约日期
    getAvailableDates(teacher) {
      if (!teacher.availableSchedule) return []
      
      return Object.keys(teacher.availableSchedule)
        .filter(date => {
          // 只显示今天及以后的日期
          return date >= this.currentDate
        })
        .map(date => ({
          date,
          hasAvailable: teacher.availableSchedule[date].some(period => period.available)
        }))
        .filter(item => item.hasAvailable)
        .slice(0, 7) // 最多显示7天
    },
    
    // 获取指定日期的时间段
    getTimePeriodsForDate(teacher, date) {
      if (!teacher.availableSchedule || !teacher.availableSchedule[date]) {
        return []
      }
      return teacher.availableSchedule[date]
    },
    
    // 格式化日期
    formatDate(dateStr, format) {
      const date = new Date(dateStr)
      const options = {
        'DD': date.getDate().toString().padStart(2, '0'),
        'ddd': ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()],
        'MM': (date.getMonth() + 1).toString().padStart(2, '0'),
        'YYYY': date.getFullYear().toString()
      }
      
      return options[format] || dateStr
    },
    
    // 取消预约
    handleCancel() {
      this.$confirm('确定要取消预约吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {
        // 用户取消
      })
    },
    
    // 提交预约
    async handleSubmit() {
      if (!this.canSubmit) {
        this.$message.warning('请完整填写预约信息')
        return
      }
      
      this.submitting = true
      
      try {
        const appointmentData = {
          teacherId: this.selectedTeacher.id,
          teacherName: this.selectedTeacher.name,
          date: this.selectedDate,
          timePeriodId: this.selectedTimePeriod.id,
          startTime: this.selectedTimePeriod.startTime,
          endTime: this.selectedTimePeriod.endTime,
          consultationMethodId: this.selectedMethod.id,
          consultationMethod: this.selectedMethod.title,
          problemDescription: this.problemDescription.trim()
        }
        
        const response = await createAppointment(appointmentData)
        
        if (response.code === 200) {
          this.$message.success('预约成功！')
          
          // 显示预约确认信息
          this.$alert(
            `预约老师：${this.selectedTeacher.name}\n` +
            `预约时间：${this.selectedDate} ${this.selectedTimePeriod.startTime}-${this.selectedTimePeriod.endTime}\n` +
            `咨询方式：${this.selectedMethod.title}`,
            '预约成功',
            {
              confirmButtonText: '确定',
              type: 'success'
            }
          ).then(() => {
            // 跳转到预约列表或首页
            this.$router.push('/appointment-list')
          })
        } else {
          throw new Error(response.msg || '预约失败')
        }
        
      } catch (error) {
        console.error('预约失败:', error)
        this.$message.error(error.message || '预约失败，请重试')
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.calendar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  border-left: 4px solid #409EFF;
  padding-left: 12px;
}

/* 用户信息区域 */
.user-info-section {
  margin-bottom: 32px;
}

.user-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  background-color: #f0f0f0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.user-student-id,
.user-school,
.user-grade,
.user-major {
  font-size: 14px;
  color: #606266;
  margin: 2px 0;
}

/* 预约区域 */
.appointment-section {
  margin-bottom: 32px;
}

.teachers-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.teacher-card {
  background: white;
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.teacher-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

.teacher-card.active {
  border-color: #409EFF;
  background-color: #f0f8ff;
}

.teacher-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.teacher-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background-color: #f0f0f0;
}

.teacher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-details {
  flex: 1;
}

.teacher-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.teacher-title {
  font-size: 14px;
  color: #409EFF;
  margin: 2px 0;
  font-weight: 500;
}

.teacher-description {
  font-size: 13px;
  color: #909399;
  margin: 8px 0 0 0;
  line-height: 1.4;
}

.teacher-rating {
  display: flex;
  align-items: center;
  margin: 6px 0;
  font-size: 13px;
}

.rating-stars {
  margin-right: 6px;
}

.rating-stars i {
  font-size: 14px;
  color: #dcdfe6;
  margin-right: 2px;
}

.rating-stars i.star-filled {
  color: #f7ba2a;
}

.rating-stars i.star-half {
  color: #f7ba2a;
}

.rating-score {
  color: #f7ba2a;
  font-weight: 600;
  margin-right: 4px;
}

.consultation-count {
  color: #909399;
  font-size: 12px;
}

.teacher-specialties {
  margin: 8px 0;
}

.specialty-tag {
  display: inline-block;
  background: #ecf5ff;
  color: #409EFF;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 4px;
  border: 1px solid #d9ecff;
}

/* 时间选择 */
.available-times {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.time-slots {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.date-slot {
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 70px;
}

.date-slot:hover {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.date-slot.selected {
  border-color: #409EFF;
  background-color: #409EFF;
  color: white;
}

.date-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-number {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.date-day {
  font-size: 12px;
  margin-top: 2px;
}

.time-periods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.time-period {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.time-period.available:hover {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.time-period.selected {
  border-color: #409EFF;
  background-color: #409EFF;
  color: white;
}

.time-period:not(.available) {
  background-color: #f0f0f0;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 咨询方式 */
.consultation-methods {
  margin-bottom: 32px;
}

.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.method-card {
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-card:hover {
  border-color: #409EFF;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

.method-card.selected {
  border-color: #409EFF;
  background-color: #f0f8ff;
}

.method-icon {
  font-size: 32px;
  color: #409EFF;
  margin-bottom: 12px;
}

.method-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.method-description {
  font-size: 13px;
  color: #606266;
  margin: 8px 0;
  line-height: 1.5;
}

.method-price {
  margin: 12px 0;
  text-align: center;
}

.price-amount {
  font-size: 24px;
  font-weight: 700;
  color: #e6a23c;
}

.price-duration {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.method-advantages {
  margin-top: 12px;
  text-align: center;
}

.advantage-tag {
  display: inline-block;
  background: #f0f9ff;
  color: #67c23a;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  margin: 2px 4px;
  border: 1px solid #e1f3d8;
}

/* 问题描述 */
.problem-description {
  margin-bottom: 32px;
}

.problem-description ::v-deep .el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
}

.problem-description ::v-deep .el-textarea__inner:focus {
  border-color: #409EFF;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 20px;
}

.action-buttons .el-button {
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .calendar-container {
    padding: 16px;
  }
  
  .methods-grid {
    grid-template-columns: 1fr;
  }
  
  .time-slots {
    justify-content: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .teacher-info {
    flex-direction: column;
    text-align: center;
  }
  
  .teacher-avatar {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>